<style lang="less" scoped>
.search {
  width:400px;
}
img {
  width:50px;
  height: 50px;
}
</style>

<template lang="pug">
#admin-article.admin
  br
  vsearch(class="search",model='Visitor', searchKey='_id', :start='start')
  template
    el-table(:data='items', border='', style='width: 100%')
      el-table-column(prop='nickName',align="center",width="150", label='昵称')
      el-table-column(align="center",width="200", label='头像')
        template(scope="scope")
            img(:src="scope.row.avatarUrl")
      el-table-column(align="center",width="200", label='性别')
        template(scope="scope")
            span {{scope.row.gender===1?'男':'女'}}
      el-table-column(prop='city',align="center",width="150", label='城市')
      el-table-column(prop='province',align="center",width="150", label='省份')
      el-table-column(prop='country',align="center",width="150", label='国家')
      el-table-column(prop='collectCount',align="center",width="150", label='收藏数')
      el-table-column(prop='viewCount',align="center",width="150", label='查看数')
      el-table-column(prop='commentCount',align="center",width="150", label='评论数')
      //- el-table-column(label='操作',align="center",width="150")
      //-   template(scope='scope')
      //-     el-button(size='small',
      //-               @click='handleEdit(scope.$index, scope.row)') 编辑
      //-     el-button(size='small',
      //-               type='danger',
      //-               @click='handleDelete(scope.$index, scope.row)') 删除
  el-pagination(@size-change='handleSizeChange',
                @current-change='handleCurrentChange',
                :current-page="1",
                :page-size='20',
                layout='total, prev, pager, next',
                :total='total')
</template>

<script>
import _ from 'lodash';

export default {
  name: "admin-article",
  computed: {
    items() {
      const visitors = this.$store.state.adminItems;
      return visitors;
    },
    total() {
      return this.$store.state.count; // 列表总数
    }
  },
  data() {
    return {
      start: 0
    };
  },
  methods: {
    fetch(start = 0) {
         const _this = this
      const cb = function(result) {
        _this.$set(_this, 'start', start)
      }
      this.$store.dispatch('FETCH_ADMIN_ITEMS', {
        cb: cb,
        url: 'visitors',
        data: {
          start: start,
        }
      })
    },
    handleEdit(index, row) {
      this.$router.push(`/admin/addArticle?id=${row._id}`);
    },
    handleDelete(index, row) {
      const _this = this;
      this.$store.dispatch("DELETE_ADMIN_ITEM", {
        url: `article/${row._id}`,
        msg: _this.$message,
        cb: _this.fetch
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.fetch(val - 1);
      console.log(`当前页: ${val}`);
    }
  },
  beforeMount() {
    this.fetch();
  }
};
</script>

<style lang="stylus" scoped>
.el-table, .el-pagination {
  margin-top: 20px;
}

.el-input {
  width: 40%;
}

.add-btn {
  margin-left: 30px;
}

.el-table {
  margin-top: 30px;
}
</style>
